<template>
  <div class="box whole-line">
    <div class="header">Summary</div>
    <div class="contentBox">
      <div class="left" style="width: 40%">
        <div class="title">Microbe description</div>
        <ul>
          <li>
            <div class="itemTitle">Kingdoms</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.KINGDOM}`">{{ infoData?.KINGDOM }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Phylum</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.PHYLUM}`">{{ infoData?.PHYLUM }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Class</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.CLASS}`">{{ infoData?.CLASS }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Gigaorder</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.ORDER_S}`">{{ infoData?.ORDER_S }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Family</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.FAMILY}`">{{ infoData?.FAMILY }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Genus</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.GENES}`">{{ infoData?.GENES }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Species</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${infoData?.SPECIES}`">{{ infoData?.SPECIES }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Strain</div>
            <div>{{ infoData?.STRAIN }}</div>
          </li>
          <li>
            <div class="itemTitle">Organism name</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${infoData?.TAXID}`">{{
                infoData?.ORGANISM_NAME }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Assembly accession</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/datasets/genome/${infoData?.GENOME_ID}/`">{{ infoData?.GENOME_ID
                }}</a>
            </div>
          </li>
          <li>
            <div class="itemTitle">Taxid</div>
            <div>
              <a style="color: #0c4270" target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${infoData?.TAXID}`">{{
                infoData?.TAXID }}</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="right" style="width: 40%">
        <div class="title">Gene description</div>
        <ul>
          <li>
            <div class="itemTitle">Gene id</div>
            <div>{{ infoData?.GENE_ID }}</div>
          </li>
          <li>
            <div class="itemTitle">Gene Name</div>
            <div>{{ infoData?.GENE_NAME }}</div>
          </li>
          <li>
            <div class="itemTitle">Strand</div>
            <div>{{ infoData?.STRAND }}</div>
          </li>
          <li>
            <div class="itemTitle">Gene length</div>
            <div>{{ infoData?.GENE_LENGTH }}</div>
          </li>
          <li>
            <div class="itemTitle">UniRef90/50</div>
            <div>{{ infoData?.UniRef90_50 }}</div>
          </li>
          <li>
            <div class="itemTitle">GC(%)</div>
            <div>{{ infoData?.GENE_GC }}</div>
          </li>
          <div style="text-align: center">
            <el-space direction="vertical" style="margin-top: 20px" size="default">
              <li>
                <el-button type="danger" plain @click="uploadFile('NucleicAcid')">Nucleic acid sequence</el-button>
              </li>
              <li v-if="props.type != 'fungi'">
                <el-button type="danger" plain @click="uploadFile('Protein')">Protein sequence</el-button>
              </li>
              <li>
                <el-button type="danger" plain @click="toRouterPath">Genome Browser</el-button>
              </li>
            </el-space>
          </div>
        </ul>
      </div>
    </div>
  </div>
  <div class="box whole-line">
    <div class="header">Primer description</div>
    <div class="contentBox">
      <div class="left">
        <div class="title">Forward</div>
        <ul>
          <li>
            <div class="itemTitle">End stability</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_END_STABILITY) }}</div>
          </li>
          <li>
            <div class="itemTitle">GC(%)</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_GC_PERCENT) }}</div>
          </li>
          <li>
            <div class="itemTitle">TM</div>
            <div>{{ roundToOneDecimal(infoData?.PRIMER_LEFT_TM) }}</div>
          </li>
          <li>
            <div class="itemTitle">Hairpin TH</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_HAIRPIN_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Penalty</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_PENALTY) }}</div>
          </li>
          <li>
            <div class="itemTitle">Self any TH</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_SELF_ANY_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Self end TH</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_SELF_END_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Sequence</div>
            <div>{{ infoData?.PRIMER_LEFT_SEQUENCE }}</div>
          </li>
          <!-- <li>
            <div>TM</div>
            <div>{{ processData(infoData?.PRIMER_LEFT_TM) }}</div>
          </li> -->
        </ul>
      </div>
      <div class="conter">
        <div class="title">Primer pair</div>
        <ul>
          <li>
            <div class="itemTitle">Any TH</div>
            <div>{{ processData(infoData?.PRIMER_PAIR_COMPL_ANY_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">End TH</div>
            <div>{{ processData(infoData?.PRIMER_PAIR_COMPL_END_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Penalty</div>
            <div>{{ processData(infoData?.PRIMER_PAIR_PENALTY) }}</div>
          </li>
          <li style="color: red">
            <div class="itemTitle">Product size</div>
            <div>{{ infoData?.PRIMER_PAIR_PRODUCT_SIZE }}</div>
          </li>
          <li style="margin-top: 30px">
            <el-button style="margin: 0 auto" plain type="danger" @click="toPrimerBrowse">Primer Browser</el-button>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="title">Reverse</div>
        <ul>
          <li>
            <div class="itemTitle">End stability</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_END_STABILITY) }}</div>
          </li>
          <li>
            <div class="itemTitle">GC(%)</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_GC_PERCENT) }}</div>
          </li>
          <li>
            <div class="itemTitle">TM</div>
            <div>{{ roundToOneDecimal(infoData?.PRIMER_RIGHT_TM) }}</div>
          </li>
          <li>
            <div class="itemTitle">Hairpin TH</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_HAIRPIN_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Penalty</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_PENALTY) }}</div>
          </li>
          <li>
            <div class="itemTitle">Self any TH</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_SELF_ANY_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Self end TH</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_SELF_END_TH) }}</div>
          </li>
          <li>
            <div class="itemTitle">Sequence</div>
            <div>{{ infoData?.PRIMER_RIGHT_SEQUENCE }}</div>
          </li>
          <!-- <li>
            <div>TM</div>
            <div>{{ processData(infoData?.PRIMER_RIGHT_TM) }}</div>
          </li> -->
        </ul>
      </div>
    </div>

    <h2>
      Location of <span style="color: #ff0008">primers</span> and
      <span style="color: #000bff">amplicon</span> (highlighted) in gene
      sequence
    </h2>
    <h3>Location in coding Sequence (primers and amplicon highlighted)</h3>
    <div class="nucleicAcidContent" v-if="nucleicAcidContent != 'NOTFOUND'">
      <span>{{ nucleicAcidContent.data1 }}</span>
      <span style="color: red">{{ nucleicAcidContent.data2 }}</span>
      <span style="color: blue">{{ nucleicAcidContent.data3 }}</span>
      <span style="color: red">{{ nucleicAcidContent.data4 }}</span>
      <span>{{ nucleicAcidContent.data5 }}</span>
    </div>
    <div class="nucleicAcidContent" v-else>
      <el-empty description="description" />
    </div>
  </div>
</template>

<script setup>
import {
  getGeneDataForSearchById,
  getNucleicAcidContent,
} from "@/api/search.js";
import { nextTick, watch, ref, defineProps, onMounted } from "vue";
import { getNucleicAcidFile, getProteinFile } from "@/api/dataBrowse.js";
import { processData } from "@/utils/common.js";
import { geneBrowserLocation } from "@/api/jbrowseTable.js";
import { downloadFile } from "@/api/mange.js";
import router from "@/router/index";
import { useRoute } from "vue-router";
const route = useRoute();
const infoData = ref();
const props = defineProps(["type", "id", "infoRow"]);
const nucleicAcidContent = ref({});
watch(
  props,
  (newVal) => {
    nextTick(() => {
      getInfo({
        type: localStorage.getItem("searchType"),
        id: props.id,
      });
    });
  },
  {
    deep: true, // 深度监听
    immediate: true, //写上它，初始化时也会调用监听
  }
);
// 四舍五入保留一位小数
const roundToOneDecimal = (number) => {
  return parseFloat(Number(number).toFixed(1));
};
const downloadUrl = () => {
  return `/geneData/getNucleicAcid/${props.type}/${infoData.value.GENE_ID}`;
};
const getInfo = (params) => {
  getGeneDataForSearchById(params).then((res) => {
    infoData.value = res.data.data;
    // 处理数据 传递后台
    let arr = [
      res.data.data.PRIMER_LEFT.split(", ")[0].replace(/[^0-9]/g, ""),
      res.data.data.PRIMER_LEFT.split(", ")[1].replace(/[^0-9]/g, ""),
      res.data.data.PRIMER_RIGHT.split(", ")[0].replace(/[^0-9]/g, ""),
      res.data.data.PRIMER_RIGHT.split(", ")[1].replace(/[^0-9]/g, ""),
    ];
    let paramsData = {
      type: params.type,
      str: arr.join(","),
      id: "",
    };
    if (params.type == "fungi") {
      paramsData.id = res.data.data.CDS_ID;
    } else {
      paramsData.id = res.data.data.GENE_ID;
    }
    console.log(" paramsData", paramsData);
    getNucleicAcidContent(paramsData).then((res) => {
      if (res.data.code == "NOTFOUND") {
        nucleicAcidContent.value = "NOTFOUND";
      } else {
        nucleicAcidContent.value = res.data.data;
      }
    });
  });
};
const insertIntervalString = (originStr) => {
  return originStr?.replace(/(.{60})/g, "$1\n");
};
// 下载
const uploadFile = (type) => {
  let urlParams = {
    type: props.type,
    id: "",
  };
  if (props.type == "fungi") {
    urlParams.id = infoData.value.CDS_ID;
  } else {
    urlParams.id = infoData.value.GENE_ID;
  }
  if (type == "NucleicAcid") {
    downLoadFile("geneData/getNucleicAcid", urlParams);
  } else if (type == "Protein") {
    downLoadFile("geneData/getProtein", urlParams);
  }
};
const toPrimerBrowse = () => {
  let url = `https://www.primerbanks.com/jbrowse/?config=${props.type}/${infoData.value.GENOME_ID}/${infoData.value.GENOME_ID}_primer.json&loc=${infoData.value.PRIMER_LOCATION}&assembly=${infoData.value.GENOME_ID}.fna&tracks=${infoData.value.GENOME_ID}.fna-ReferenceSequenceTrack,${infoData.value.GENOME_ID}.gff,${infoData.value.GENOME_ID}.bed`;
  window.open(url, "_blank");
};
// 模拟a标签下载文件
const downLoadFile = (url, urlParams) => {
  // 创建一个a标签元素
  const downloadLink = document.createElement("a");
  // 设置a标签的href属性为下载链接
  downloadLink.href = `http://www.primerbanks.com/${url}/${urlParams.type}/${urlParams.id}`;
  downloadLink.download = `${urlParams.geneId}.fasta`;
  // 将a标签添加到HTML文档中的某个元素中
  document.body.appendChild(downloadLink);
  // 触发a标签的点击事件，即模拟用户点击下载链接
  downloadLink.click();
};
// 跳转路由
const toRouterPath = () => {
  let params = {
    type: props.type,
    genemoId: infoData.value.GENOME_ID,
  };
  geneBrowserLocation(params).then((res) => {
    const resData = res.data.data;
    // 跳转路由
    localStorage.setItem(
      "genomeBrowserData",
      JSON.stringify({
        type: props.type,
        genomeId: infoData.value.GENOME_ID,
        GENE_LOCATION: infoData.value.GENE_LOCATION,
        RefName: resData.RefName,
      })
    );
    let url = `https://www.primerbanks.com/jbrowse/?config=${props.type}/${infoData.value.GENOME_ID}/${infoData.value.GENOME_ID}.json&loc=${infoData.value.GENE_LOCATION}&assembly=${infoData.value.GENOME_ID}.fna&tracks=${infoData.value.GENOME_ID}.fna-ReferenceSequenceTrack,${infoData.value.GENOME_ID}.gff,${infoData.value.GENOME_ID}.bed`;
    window.open(url, "_blank");
    // router.push("/genomeBrowser");
  });
};
</script>
<style scoped lang="scss">
ul {
  list-style: none;
  padding: 10px;
}

ul li {
  display: flex;
  justify-content: space-between;
}

.box {
  box-shadow: 2px 2px 4px 2px #d7d7d7;
  margin-bottom: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #000;
}

.line {
  width: 100%;
  border-top: 2px solid #0c4270;
}

.whole-line {
  width: 100%;
  box-sizing: content-box;

  .header {
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #d7d7d7;
    background-color: #0c4270 !important;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .contentBox {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    text-align: left;

    .left,
    .conter,
    .right {
      width: 38%;
      border-bottom: 2px solid #0c4270;

      .title {
        font-weight: bold;
        padding: 10px;
        background-color: #0c4270 !important;
        color: #fff;
        border-radius: 10px;
      }
    }

    .conter {
      width: 20%;
    }
  }
}

.tips {
  font-size: 30px;
}

.nucleicAcidContent {
  margin: 0 auto;
  text-align: left;
  letter-spacing: 5px;
  width: 820px;
  font-weight: 550;
  white-space: pre-wrap;
  font-family: "Courier New", Courier, monospace;
  padding-bottom: 30px;
}

.itemTitle {
  font-weight: bold;
}
</style>
